{% extends "base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "配置 | 蓝鲸智云" %}</title>
    {{ block.super }}
    <style>
        .operator {
            float: right;
        }

        .operator-btn {
            padding: 0 2px;
            height: 20px;
            float: right;
            margin: 6px 5px 0 0;
            display: none;
        }

        .bk-dropdown-menu {
            margin: 10px 5px 10px 0;
        }

        .td-bg {
            color: #f0f0f0;
            width: 300px;
            background-color: #d1d0d0;
            font-weight: bold;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="page-contactus">
        <div style="width: 250px; float: left;margin: 0 10px; height: 500px">
            <div style=" margin: 10px 0 0 20px">
                <span style="font-weight: bold;">选择业务</span>
                <div style="width: 200px">
                    <select id="search_biz_inst_topo" class="bk-form-select" onchange="search_biz_inst_topo()">
                        {#                        {% for biz in bizs %}#}
                        {#                            <option value="{{ biz.bk_biz_id }}">[{{ biz.bk_biz_id }}] {{ biz.bk_biz_name }}</option>#}
                        {#                        {% endfor %}#}
                    </select>
                </div>
            </div>

            <div style=" margin: 10px 0 10px 20px">
                <span style="font-weight: bold;">选择拓扑</span>
            </div>
            <div class="bk-tree" id="bk-tree">
                <ul class="tree-content" id="bk-ul-tops">
                </ul>
            </div>
        </div>

        <div class="bk-tab2 bk-tab2-small" style="margin-left: 280px" id="bk-tab2">
            <div class="bk-tab2-head">
                <ul class="bk-tab2-nav">
                    <li class="tab2-nav-item active">业务资源</li>
                    <li class="tab2-nav-item" style="display: none">服务实例</li>
                    <li class="tab2-nav-item">业务拓扑</li>
                    <li class="tab2-nav-item">节点信息</li>
                </ul>
            </div>
            <div class="bk-tab2-content">
                <!-- 业务资源 -->
                <div class="bk-tab2-pane p15 active">
                    <div class="f12">
                        <div style="min-width: 80%">
                            <div style="display: none">
                                配置平台资源信息
                                <span class="bk-tag">主机：</span>
                                <span class="bk-tag bk-gray">业务：</span>
                                <span class="bk-tag bk-light-gray">业务集：</span>
                                <button class="bk-tag bk-primary">交换机：</button>
                                <span class="bk-tag bk-danger">路由器：</span>
                                <span class="bk-tag bk-success">负载均衡：</span>
                                <span class="bk-tag bk-warning">防火墙：</span>
                            </div>
                            <div class="bk-panel-header" style="display: none">
                                <div class="bk-form bk-inline-form">
                                    <div class="bk-form-item">
                                        <label class="bk-label">业务：</label>
                                        <div class="bk-form-content">
                                            <select name="" id="search_biz_infos" class="bk-form-select" onchange="search_biz_infos()" style="width: 250px">
                                                {% for biz in bizs %}
                                                    <option value="{{ biz.bk_biz_id }}">[{{ biz.bk_biz_id }}]&nbsp;{{ biz.bk_biz_name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="bk-collapse-panel">
                                <div class="panel-header" role="tab">
                                    <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                                    <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">业务资源信息</h3>
                                </div>

                                <div class="resource" style="background-color: #4797e6;">
                                    <div class="resource_info">
                                        <span style="display: block;float: left">
                                            <div id="host_nums"></div>
                                            <div>主机总数</div>
                                        </span>
                                        <span class="span2">
                                            <i class="bk-icon icon-pc-shape"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="resource" style="background-color: #6e6f6d;">
                                    <div class="resource_info">
                                        <span style="display: block;float: left">
                                            <div id="resource_nums"></div>
                                            <div>资源池主机数</div>
                                        </span>
                                        <span class="span2">
                                            <i class="bk-icon icon-pc"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="resource" style="background-color: #f46901;">
                                    <div class="resource_info">
                                        <span style="display: block;float: left">
                                            <div id="cluster_nums"></div>
                                            <div>集群总数</div>
                                        </span>
                                        <span class="span2">
                                            <i class="bk-icon icon-order-shape"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="resource" style="background-color: #039593;">
                                    <div class="resource_info">
                                        <span style="display: block;float: left">
                                            <div id="module_nums"></div>
                                            <div>模块总数</div>
                                        </span>
                                        <span class="span2">
                                            <i class="bk-icon icon-empty-shape"></i>
                                        </span>
                                    </div>
                                </div>

                                <div id="" style="display: none">
                                    业务的空闲机/故障机/待回收模块
                                    实例ID：<span id="bk_set_id"></span>
                                    实例名称：<span id="bk_set_name"></span>
                                    <div>模块：</div>
                                    <div id="module"></div>
                                </div>
                            </div>
                            <div class="bk-collapse-panel">
                                <div class="panel-header" role="tab">
                                    <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                                    <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">主机列表</h3>
                                </div>
                                <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                                    <!-- 顶部菜单按钮开始 -->
                                    <button type="button" class="bk-button bk-primary bk-dropdown-menu" title="新增">
                                        <span>新增</span>
                                    </button>

                                    <div class="bk-dropdown-menu" id="transfer-to">
                                        <button class="bk-button bk-primary bk-dropdown-trigger"> <!--  is-disabled -->
                                            <span>转移至</span><i class="bk-icon icon-angle-down"></i>
                                        </button>
                                        <div class="bk-dropdown-content left-align " style="top: 39px;">
                                            <ul class="bk-dropdown-list">
                                                <li>
                                                    <a href="#transferIdlePool" data-toggle="modal" data-target="#hostOperator" onclick="modelType(1, '转移主机到空闲机池')">空闲机池</a>
                                                </li>
                                                <li>
                                                    <a href="#transferBizModule" data-toggle="modal" data-target="#hostOperator" onclick="modelType(2, '转移主机到业务模块')">业务模块</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="bk-dropdown-menu" id="append-to">
                                        <button class="bk-button bk-primary bk-dropdown-trigger">
                                            <span>追加至</span><i class="bk-icon icon-angle-down"></i>
                                        </button>
                                        <div class="bk-dropdown-content left-align" style="top: 39px;">
                                            <ul class="bk-dropdown-list">
                                                <li>
                                                    <a href="#appendBizModule" data-toggle="modal" data-target="#hostOperator" onclick="modelType(3, '追加主机到业务模块')">业务模块</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="bk-dropdown-menu" id="remove">
                                        <button class="bk-button bk-primary bk-dropdown-trigger">
                                            <span>移出</span><i class="bk-icon icon-angle-down"></i>
                                        </button>
                                        <div class="bk-dropdown-content left-align" style="top: 39px;">
                                            <ul class="bk-dropdown-list">
                                                <li>
                                                    <a href="#removeBizModule" data-toggle="modal" data-target="#hostOperator" onclick="modelType(4, '移除主机')">业务模块</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 顶部菜单按钮结束 -->

                                    <!-- 表格 -->
                                    <table id="hosts" class="bk-table bk-table-header-bordered">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" class="checkAll" id="hostLists"/></th>
                                            <th>序号</th>
                                            <th>主机ID</th>
                                            <th>云区域ID</th>
                                            <th>内网IP</th>
                                            <th>OS类型</th>
                                            <th>MAC地址</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 服务实例 -->
                <div class="bk-tab2-pane p15">
                    <div class="f12"></div>
                </div>
                <!-- 业务拓扑 -->
                <div class="bk-tab2-pane p15">
                    <div class="bk-collapse-panel">
                        <div id="biztop" style="width: 920px; height:980px"></div>
                    </div>
                </div>
                <!-- 节点信息 -->
                <div class="bk-tab2-pane p15">
                    {#                    <div class="magic-desc" style="background-color: #0E7AE2;width: 5px; display: flex; height: 20px">#}
                    {#                        基础信息#}
                    {#                    </div><span></span>#}

                    <div class="bk-collapse-panel">
                        <div class="panel-header" role="tab">
                            <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                            <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">基础信息</h3>
                        </div>
                        <div id="node-information1"></div>
                    </div>

                    <div class="bk-collapse-panel">
                        <div class="panel-header" role="tab">
                            <a data-toggle="collapse" class="panel-icon panel-spread"></a>
                            <h3 data-toggle="collapse" class="panel-title" aria-expanded="true">角色</h3>
                        </div>
                        <div id="node-information2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增and编辑( Modal )  -->
    <div class="modal fade" id="setOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">新建集群</h4>
                </div>

                <div style="padding: 10px 0 20px 75px;">
                    已选择：<span class="bk-tag bk-danger" id="dialog_biz_name"></span>
                    <span style="display: none" id="dialog_biz_id"></span>
                </div>
                <form id="set_form">
                    <div class="bk-form" style="width:900px;padding: 10px" id="validate_form">
                        <input type="hidden" id="award_id" class="bk-form-input">
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">集群名称</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="set_name" name="bk_set_name"
                                       placeholder="请输入集群名称">
                                {#                                请输入集群名称，需批量创建多个可使用换行分割#}
                            </div>
                        </div>
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">集群描述</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="set_desc" name="bk_set_desc"
                                       placeholder="请输入集群描述信息">
                            </div>
                        </div>

                        {#                        <div class="bk-form-item is-required">#}
                        {#                            <label class="bk-label" style="width:150px;">集群模板</label>#}
                        {#                            <div class="bk-form-content" style="margin-left:150px;">#}
                        {#                                <select name="" id="award_level" class="bk-form-select">#}
                        {#                                    请选择集群模板#}
                        {#                                    <option value=0></option>#}
                        {#                                </select>#}
                        {#                            </div>#}
                        {#                        </div>#}
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="bk-button bk-primary" onclick="create_set()">创建</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="moduleOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">新建模块</h4>
                </div>
                <div style="padding: 10px 0 20px 75px;">
                    已选择：<span class="bk-tag bk-danger" id="dialog_module_biz_name"></span>/<span class="bk-tag bk-danger" id="dialog_set_name"></span>
                    <span style="display: none" id="dialog_module_biz_id"></span>
                    <span style="display: none" id="dialog_set_id"></span>
                </div>

                <form id="module_form">
                    <div class="bk-form" style="width:900px;padding: 10px" id="validate_form">
                        <input type="hidden" id="award_id" class="bk-form-input">
                        <div class="bk-form-item is-required">
                            <label class="bk-label" style="width:150px;">模块名称</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <input type="text" class="bk-form-input" id="bk_module_name" name="bk_module_name"
                                       placeholder="请输入模块名称">
                                {#                                请输入模块名称，需批量创建多个可使用换行分割#}
                            </div>
                        </div>
                    </div>
                </form>
                <div class="modal-footer">
                    <!--  data-dismiss = “modal”,是一个自定义的H5 data属性。在这里它被用于关闭模态窗口。-->
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="bk-button bk-primary" onclick="create_module()">创建</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

    <!-- 提醒模态框 -->


    <!-- 主机管理 -->
    <div class="modal fade" id="hostOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"
         data-backdrop="static">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="hostManager"></h4>
                </div>

                <form id="module_form" style="display: none">
                    <div class="bk-form" style="padding: 10px" id="validate_form">
                        <input type="text" class="bk-form-input" style="float: left" id="bk_module_name" name="bk_module_name" placeholder="请输入关键词">
                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="bk-button bk-default" data-dismiss="modal">取消</button>
                    <button type="button" class="bk-button bk-primary" onclick="create_module()" id="isCheck"></button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div id="os_type" style="display: none;">{{ os_type }}</div>
{% endblock %}

{% block extra_block %}
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.config.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/umeditor.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/lang/zh-cn/zh-cn.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/select2-3.5.2/select2.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkSwitcher-1.0/js/bkSwitcher.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/validate-1.14.0/js/jquery.validate.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDropdownMenu-1.0/js/bkDropdownMenu.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTab-1.0/js/bkTab.js"></script>

    <script>
        var os_type = JSON.parse(document.getElementById("os_type").innerText);

        $.ajax({
            url: "{{ SITE_URL }}search_business/",
            method: 'post',
            success: function (data) {
                var biz_topo = "";
                data.bizs.forEach(biz => {
                    biz_topo += '<option value=' + biz.bk_biz_id + '>[' + biz.bk_biz_id + '] ' + biz.bk_biz_name + '</option>';
                    sessionStorage.setItem(biz.bk_biz_id, JSON.stringify({
                        "bk_biz_name": biz.bk_biz_name, "time_zone": biz.time_zone, "language": biz.language, "life_cycle": biz.life_cycle,
                        "create_time": biz.create_time, "bk_biz_maintainer": biz.bk_biz_maintainer, "bk_biz_developer": biz.bk_biz_developer,
                        "bk_biz_productor": biz.bk_biz_productor, "bk_biz_tester": biz.bk_biz_tester, "operator": biz.operator
                    }));
                })
                document.getElementById("search_biz_inst_topo").innerHTML = biz_topo;
                search_biz_inst_topo();
            }
        });


        // 选项卡
        $('.bk-tab2').bkTab({
            tabTriggers: '.tab2-nav-item',
            tabPanels: '.bk-tab2-pane',
            onTabChange: function (index, tab) {
                //if (2 === index) {
                //    biz_topo();
                //} else if (3 === index) {
                //    node_infomation();
                //}
            }
        });

        // 拓扑导航栏
        $('.bk-tree').on('click', 'a', function (event) {
            if ($(this).parent('li').hasClass('file')) {
                $('.file').removeClass('open');
            }
            $(this).parent('li').toggleClass('open');
        });


        // 表格头部下拉菜单按钮
        $('#transfer-to').bkDropdown({
                onShow: function () {
                    if ($("#transfer-to button").hasClass("is-disabled"))
                        $('#transfer-to').data('bkDropdown').hide();
                }
            }
        );

        $('#append-to').bkDropdown({
            onShow: function () {
                if ($("#append-to button").hasClass("is-disabled"))
                    $("#append-to").data('bkDropdown').hide();
            }
        });

        $('#remove').bkDropdown({
            onShow: function () {
                if ($("#remove button").hasClass("is-disabled"))
                    $("#remove").data('bkDropdown').hide();
            }
        });


        // 鼠标移入 事件
        // transfer_to.onmouseover = function () {
        //     console.log("鼠标移入");
        // }
        // 鼠标移出 事件
        // transfer_to.onmouseleave = function () {
        //     console.log("鼠标移出");
        // }

        $("#bk-ul-tops").hover(function () {
                $(".operator-btn").show();
            },
            function () {
                $(".operator-btn").hide();
            }
        )

        //表格(DataTables)
        var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }
        var businessInfo = $("#hosts").DataTable({
            //fnPreDrawCallback: function () {
            //    $('.dataTables_filter input').attr({'name':'search', 'placeholder': '请输入IP或MAC地址'});//提示
            //},

            sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
            pagingType: "full_numbers",
            paging: true, //隐藏分页
            ordering: false, //关闭排序
            info: false, //隐藏左下角分页信息
            searching: false, //关闭搜索
            pageLength: 20, //每页显示几条数据
            lengthChange: false, //不允许用户改变表格每页显示的记录数
            //bLengthChange: true,  //开关，是否显示每页显示多少条数据的下拉框
            language: language, //汉化
            serverSide: true,
            ajax: {
                url: '{{ SITE_URL }}list_biz_hosts/',
                method: "post",
                dataType: 'json',
                data: function (d) {
                    //return JSON.stringify({"bk_biz_id": parseInt($("#search_biz_infos option:selected").val()), "start": d.start, "length": d.length});
                    return JSON.stringify({"bk_biz_id": parseInt($("#search_biz_inst_topo option:selected").val()), "start": d.start, "length": d.length});
                },
                dataSrc: function (json) {
                    // 业务资源信息
                    document.getElementById("host_nums").innerText = json.total;
                    // document.getElementById("free_nums").innerText = json.free_nums;
                    document.getElementById("resource_nums").innerText = json.resource_nums;

                    document.getElementById("bk_set_id").innerText = json.bk_set_id;
                    document.getElementById("bk_set_name").innerText = json.bk_set_name;
                    //moduleHtml = "";
                    //js 遍历方式2  forEach遍历对象类型数组
                    //json.module.forEach(function (moduleKey) {
                    //    var cnts = '<div id="">模块ID：' + moduleKey.bk_module_id + '模块名称： ' + moduleKey.bk_module_name + '模块类型：' + moduleKey.default + '是否启用主机属性自动应用：' + moduleKey.host_apply_enabled + '</div>';
                    //    moduleHtml += cnts;
                    //});

                    // js遍历方式1
                    //for (const moduleKey in json.module) {
                    //    moduleHtml += '<div id="">模块ID：moduleKey.bk_module_id   模块名称： moduleKey.bk_module_name  模块类型： moduleKey.default  是否启用主机属性自动应用：moduleKey.host_apply_enabled </div>';
                    //}

                    //document.getElementById("module").innerHTML = moduleHtml;
                    return json.hosts;
                },
            },
            columns: [
                {
                    width: 5,
                    tatgets: 0,
                    data: "bk_host_id",
                    render: function (data, type, row, meta) {
                        return "<input type='checkbox' name='checkOne' class='checkOne' value='" + data + "'/>";
                    }
                },
                {
                    width: 80,
                    tatgets: 1,
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    width: 80,
                    tatgets: 2,
                    data: "bk_host_id",
                },
                {
                    width: 80,
                    tatgets: 3,
                    data: "bk_cloud_id",
                },
                {
                    width: 80,
                    tatgets: 4,
                    data: "bk_host_innerip",
                },
                {
                    width: 80,
                    tatgets: 5,
                    data: "bk_os_type",
                    render: function (data, type, row, meta) {
                        //return "<span class=\"bk-tag is-fill bk-success\">" + (null != data?os_type[data]:"未知") + "</span>";
                        return null != data?"<span class=\"bk-tag is-fill bk-success\">"+os_type[data] + "</span>":"<span class=\"bk-tag is-fill bk-danger\">未知</span>";

                        // if ("1" === data) {
                        //     return "<span class=\"bk-tag is-fill bk-success\">Linux</span>";
                        // } else if ("2" === data) {
                        //     return "<span class=\"bk-tag is-fill bk-success\">Windows</span>";
                        // } else if ("3" === data) {
                        //     return "<span class=\"bk-tag is-fill bk-success\">AIX</span>";
                        // } else {
                        //     return "<span class=\"bk-tag is-fill bk-danger\">未知</span>";
                        // }
                    }
                },
                {
                    width: 80,
                    tatgets: 6,
                    data: "bk_mac",
                },
                {
                    width: 80,
                    tatgets: 7,
                    data: "bk_host_id",
                    render: function (data) {
                        return '<a class="bk-text-button bk-info" title="主机属性克隆" onclick="clone(' +
                            data + ')">主机属性克隆</a><a class="bk-text-button bk-info" title="查看详情" href="get_host_base_info/?bk_host_id=' +
                            data + '">查看详情</a>';
                    }
                }
            ],

            //fnDrawCallback: function () {
            //    $("#hostLists").prop("checked", false);
            //}
        });

        function biz_topo() {
            var topoDom = document.getElementById("biztop");
            var topoChart = echarts.init(topoDom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;

            topoChart.showLoading();

            $.ajax({
                url: "{{ SITE_URL }}list_biz_hosts_topo/",
                method: "post",
                data: JSON.stringify({
                    "bk_biz_id": parseInt($("#search_biz_inst_topo option:selected").val()),
                    "bk_biz_name": $("#search_biz_inst_topo option:selected").text().split("] ")[1],
                    "start": 0, "length": 100
                }),
                success: function (data) {
                    topoChart.hideLoading();
                    data.children.forEach(function (datum, index) {
                        index % 2 === 0 && (datum.collapsed = true);
                    });
                    topoChart.setOption(
                        (option = {

                            tooltip: {
                                trigger: 'item',
                                triggerOn: 'mousemove'
                            },
                            series: [
                                {
                                    type: 'tree',
                                    data: [data],
                                    top: '1%',
                                    left: '10%',
                                    bottom: '1%',
                                    right: '20%',
                                    symbolSize: 14,
                                    label: {
                                        position: 'left',
                                        verticalAlign: 'middle',
                                        align: 'right',
                                        fontSize: 14
                                    },
                                    leaves: {
                                        label: {
                                            position: 'right',
                                            verticalAlign: 'middle',
                                            align: 'left'
                                        }
                                    },
                                    emphasis: {
                                        focus: 'descendant'
                                    },
                                    initialTreeDepth: -1,
                                    expandAndCollapse: true,
                                    animationDuration: 550,
                                    animationDurationUpdate: 750
                                }
                            ]
                        })
                    );
                }
                // success: function (data) {
                //     var biz_topo = "";
                //     data.info.forEach(item => {
                //         biz_topo += '<span style="margin-left: 10px;font-weight: bolder">主机ID：</span>' + item.host.bk_host_id +
                //             '<span style="margin-left: 10px;font-weight: bolder">主机：</span>' + item.host.bk_host_innerip +
                //             '<span style="margin-left: 10px;font-weight: bolder">MAC地址：</span>' + item.host.bk_mac +
                //             '<span style="margin-left: 10px;font-weight: bolder">系统类型：</span>' + os_type[item.host.bk_os_type.toString()] +
                //             '<span style="margin-left: 10px;font-weight: bolder">云区域ID：</span>' + item.host.bk_cloud_id + "<hr>";
                //         //"集群ID"item.topo.bk_set_id "集群名称"item.topo.bk_set_name
                //         item.topo.module.forEach(item2 => {
                //             //"模块ID" item2.bk_module_id
                //             //"模块名称" item2.bk_module_name
                //         })
                //     })
                //     topoDom.innerHTML = biz_topo;
                // }
            });

            if (option && typeof option === 'object') {
                topoChart.setOption(option);
            }
            window.addEventListener('resize', topoChart.resize);
        }

        function node_infomation() {
            var bk_biz_id = $('#search_biz_inst_topo option:selected').val();
            var nodeinfo = JSON.parse(sessionStorage.getItem(bk_biz_id));

            document.getElementById('node-information1').innerHTML = '<table class="bk-table has-table-striped"> <tbody> ' +
                '<tr> <td class="td-bg">ID</td> <td>' + bk_biz_id + '</td> <td class="td-bg">业务名</td> <td>' + nodeinfo.bk_biz_name + '</td> </tr> ' +
                '<tr> <td class="td-bg">时区</td> <td>' + nodeinfo.time_zone + '</td> <td class="td-bg">语言</td> <td>' + nodeinfo.language + '</td> </tr> ' +
                '<tr> <td class="td-bg">生命周期</td> <td>' + nodeinfo.life_cycle + '</td> <td class="td-bg">创建时间</td> <td>' + nodeinfo.create_time + '</td> </tr> </tbody> </table>';
            document.getElementById('node-information2').innerHTML = '<table class="bk-table has-table-striped"> <tbody> ' +
                '<tr> <td class="td-bg">运维人员</td> <td style="width: 22%">' + nodeinfo.bk_biz_maintainer + '</td> <td class="td-bg">开发人员</td> <td>' + nodeinfo.bk_biz_developer + '</td> </tr> ' +
                '<tr> <td class="td-bg">产品人员</td> <td style="width: 22%">' + nodeinfo.bk_biz_productor + '</td> <td class="td-bg">测试人员</td> <td>' + nodeinfo.bk_biz_tester + '</td> </tr> ' +
                '<tr> <td class="td-bg">操作人员</td> <td style="width: 22%">' + nodeinfo.operator + '</td></tr> </tbody> </table>'
        }

        function clone(id) {
            $.ajax({
                url: '{{ SITE_URL }}clone_host_property/',
                method: 'post',
                data: JSON.stringify({"bk_org_id": id, "bk_biz_id": parseInt($("#search_biz_infos option:selected").val()), "bk_dst_id": 8}),
                success: function (json) {
                    console.log(json)
                }
            });
        }

        function module_remove(id) {
            console.log("模块转移" + id);
            $.ajax({
                url: '{{ SITE_URL }}transfer_host_module/',
                method: 'post',
                data: JSON.stringify({
                    "bk_biz_id": parseInt($("#search_biz_infos option:selected").val()),
                    "bk_host_id": [
                        id,
                        10
                    ],
                    "bk_module_id": [
                        10
                    ],
                    "is_increment": true
                }),
                success: function (json) {
                    console.log("转移成功");
                    //window.location.href = "get_host_base_info";
                }
            });
        }

        function search_biz_inst_topo() {
            businessInfo.ajax.reload();
            $.ajax({
                url: "{{ SITE_URL }}search_biz_inst_topo/",
                method: 'post',
                data: JSON.stringify({
                    "bk_biz_id": parseInt($("#search_biz_inst_topo option:selected").val()),
                }),
                success: function (json) {
                    var bk_ul_tops = '<li class="folder open"><a href="javascript:;"><i class="bk-icon icon-apps"></i> 业-'
                        + json.bk_inst_name + '</a><a href="#setOperator" data-toggle="modal" data-target="#setOperator"><button class="bk-tag bk-primary operator-btn" onclick="set_operator(\''
                        + json.bk_inst_name + '\',' + json.bk_inst_id + ')">新建</button></a>';
                    var sub_str1 = "";
                    module_nums = 0;
                    if (json.child.length > 0) {
                        sub_str1 += '<ul class="tree-secondary">';
                        var sub_str2 = "";
                        json.child.forEach(function (childs) {
                            sub_str2 += '<li class="folder"><a href="javascript:;"><i class="bk-icon icon-panels"></i> 集-' + childs.bk_inst_name + '</a>' +
                                '<a class="bk-text-button bk-danger operator" title="删除" onclick="delete_set(' + json.bk_inst_id + ',' + childs.bk_inst_id + ')"><i class="bk-icon icon-close"></i></a>' +
                                '<a href="#moduleOperator" data-toggle="modal" data-target="#moduleOperator"><button class="bk-tag bk-primary operator-btn" style="text-align: center" onclick="module_operator(\''
                                + json.bk_inst_name + '\', ' + json.bk_inst_id + ', \'' + childs.bk_inst_name + '\', ' + childs.bk_inst_id + ')">新建</button></a>';

                            if (childs.child.length > 0) {
                                module_nums += childs.child.length;
                                sub_str2 += '<ul>';
                                var sub_str3 = "";
                                childs.child.forEach(function (subChild) {
                                    sub_str3 += '<li class="file"><a href="javascript:;"><i class="tree-icon"></i>模-' + subChild.bk_inst_name + '</a>' +
                                        '<a class="bk-text-button bk-danger operator" title="删除" onclick="delete_module(' + json.bk_inst_id + ',' + childs.bk_inst_id + ',' + subChild.bk_inst_id + ')"><i class="bk-icon icon-close"></i></a></li>';
                                });
                                sub_str2 += sub_str3 + '</ul>';
                            }

                            sub_str2 += '</li>';
                        });
                        sub_str1 += sub_str2 + "</ul>";
                    }
                    document.getElementById("cluster_nums").innerText = json.child.length;
                    document.getElementById("module_nums").innerText = module_nums;
                    document.getElementById("bk-ul-tops").innerHTML = bk_ul_tops + sub_str1 + '</li>';
                }
            });
            biz_topo();
            node_infomation();
        }


        function set_operator(biz_name, biz_id) {
            document.getElementById("dialog_biz_name").innerText = biz_name;
            document.getElementById("dialog_biz_id").innerText = biz_id;
        }

        function create_set() {
            var data = {"bk_biz_id": parseInt(document.getElementById("dialog_biz_id").innerText)};
            //var set_infos = $("#set_form").serialize();    //form表单提交内容为字符串  "set_name=234524&set_desc=52645643"
            //var set_infos2 = $("#set_form").serializeArray();  //form表单提交内容为对象  [{"name": "set_name", "value": "234524"}]

            $("#set_form").serializeArray().forEach(item => {
                data[item.name] = item.value
            });
            $.ajax({
                    url: "{{ SITE_URL }}set_operator/",
                    method: "post",
                    data: JSON.stringify(data),
                    error: function () {
                    },
                    success: function () {
                        search_biz_inst_topo();
                        $('#setOperator').modal('hide');
                    }
                }
            );
        }

        function delete_set(biz_id, set_id) {
            $.ajax({
                url: "{{ SITE_URL }}set_operator/",
                method: "delete",
                data: JSON.stringify({"bk_biz_id": biz_id, "bk_set_id": set_id}),
                success: function () {
                    search_biz_inst_topo();
                }
            });
        }

        function module_operator(biz_name, biz_id, set_name, set_id) {
            document.getElementById("dialog_module_biz_name").innerText = biz_name;
            document.getElementById("dialog_module_biz_id").innerText = biz_id;
            document.getElementById("dialog_set_name").innerText = set_name;
            document.getElementById("dialog_set_id").innerText = set_id;
        }

        function create_module() {
            var data = {
                "bk_biz_id": parseInt(document.getElementById("dialog_module_biz_id").innerText),
                "bk_set_id": parseInt(document.getElementById("dialog_set_id").innerText),
            };
            $("#module_form").serializeArray().forEach(item => {
                data[item.name] = item.value;
            })

            $.ajax({
                url: "{{ SITE_URL }}module_operator/",
                method: "post",
                data: JSON.stringify(data),
                error: function () {
                },
                success: function () {
                    search_biz_inst_topo();
                    $('#moduleOperator').modal('hide');
                }
            });
        }

        function delete_module(biz_id, set_id, module_id) {
            $.ajax({
                url: "{{ SITE_URL }}module_operator/",
                method: "delete",
                data: JSON.stringify({"bk_biz_id": biz_id, "bk_set_id": set_id, "bk_module_id": module_id}),
                success: function () {
                    search_biz_inst_topo();
                }
            });
        }


        $(".checkAll").on('click', function () {
            var check = $(this).prop("checked");
            $(".checkOne").prop("checked", check);
        });


        /*
        $('#hosts thead').on('click', 'tr', function () {
            var check = $(this).find(".checkAll").prop("checked");
            $(".chechOne").prop("checked", check);
            console.log(check);
        })

        $("#hosts tbody").on('click', 'tr', function () {
            var check = $(this).find(".checkOne").prop("checked");
            if (check && check == true) {
                $(this).find(".checkOne").prop("checked", true);
            } else {
                $(this).find(".checkOne").prop("checked", false);
            }
        });
        */


        function modelType(index, title) {
            document.getElementById("hostManager").innerText = title;
            if (1 === index) {
                document.getElementById("isCheck").innerText = "确认转移";
            } else if (2 === index) {
                document.getElementById("isCheck").innerText = "确认转移";
            } else if (3 === index) {
                document.getElementById("isCheck").innerText = "确认追加";
            } else if (4 === index) {
                document.getElementById("isCheck").innerText = "确认移除";
            }
        }
    </script>
{% endblock %}